<template>
  <!-- HTML结构:要求这里面有且只有一个根标签 -->
  <div>
    <h2>这是根组件</h2>
    <!-- 插值表达式,也叫做大胡子,小胡子语法 -->
    <!-- 不能用作属性 -->
    <p>姓名:{{ uname.toUpperCase() + " 欢迎你" }}</p>
    <p>年龄:{{ age }}</p>
    <p>{{ flag ? "111" : "222" }}</p>
    <!-- 标签的v-html属性,相当于innerHTML的意思 -->
    <p v-html="info">简介:</p>
    <!-- 标签的v-text属性,相当于innerText的意思 -->
    <p v-text="uname"></p>
  </div>
</template>

<script>
export default {
  //对象里面可以写很多东西,比如data,methods,computed,watch,components...
  //data用于存储数据,写法上要求data定义成函数,函数里面返回一个对象,所有得数据都放到这个返回得对象中
  data() {
    return {
      //页面中用到的数据,都放到这里
      uname: "luoji",
      age: 30,
      flag: true,
      info: "这是<strong>字符串</strong>",
    };
  },
};
//  JavaScript
</script>

<style>
/* css样式 */
</style>
